<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--css样式的导入-->
		<link href="css/DaoHang.css" type="text/css" rel="stylesheet">
		<!--三个导入-->
		<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="bootstrap-3.3.5-dist/jquery/jquery-3.0.0.min.js"></script>
		<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
		<style type="text/css">
		* {
				margin: 0;
				padding: 0;
			}
			
			body {
				background-color: #000;
			}
			
			.btn {
				width: 60%;
				height: 40px;
				margin-left: 22%;
				margin-top: 50px;
				float: left;
				border: 1px solid black;
				border-radius: 10px;
				background-color: #204D74;
				color: aqua;
			}
			
			#zzz {
				/*border: 10px solid #FF0000;*/
				width: 20%;
				position: fixed;
				left: -25%;
				transition: left 2s;
				top: 10px;
			}
			
			#yyy001 {
				border: 10px solid #FF0000;
				border-radius: 100px;
				position: fixed;
				top: 250px;
				width: 60%;
				/*高度定义在js里面*/
				right: -65%;
				z-index: 10;
				background-color: #FCF8E3;
				box-shadow: 10px 10px 5px #888888;
				transition: all 1s;
			}
			
			#yyy002 {
				border: 10px solid #FF0000;
				border-radius: 100px;
				position: fixed;
				top: 100px;
				width: 60%;
				/*高度定义在js里面*/
				right: -65%;
				z-index: 20;
				background-image: url(img/020.png);
				box-shadow: 10px 10px 5px #888888;
				transition: all 1s;
			}
			
			#yyy003 {
				border: 10px solid #FF0000;
				border-radius: 100px;
				position: fixed;
				top: 250px;
				width: 60%;
				/*高度定义在js里面*/
				right: -65%;
				z-index: 10;
				background-color: #5BC0DE;
				box-shadow: 10px 10px 5px #888888;
				transition: all 1s;
			}
			
			#www {
				width: 100%;
				display: none;
				position: absolute;
				left: 0;
				top: 0;
				z-index: -100;
			}
			
			#zhushen {
				width: 301px;
				height: 301px;
			}
		}
		</style>
	</head>

	<body>
		<!--全局导航栏的层，永远固定在窗口最上侧-->
		<div id="div001">
			<!--导航栏样式-->
			<nav class="navbar navbar-inverse" role="navigation">
				<!--导航栏居中部分的层，宽度70%，据左15%-->
				<div id="div002">
					<!--导航栏上左侧logo部分-->
					<div class="navbar-header">
						<!--屏幕宽度自适应，当屏幕变窄时，会自动切换样式，引用的bootstrap框架，其原理不明-->
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
						<!--导航栏上的网站LOGO-->
						<a class="navbar-brand" href="#"> <img id="div003" src="images/019.png"> <span id="div004">大千世界观望者</span></a>
					</div>

					<!--包含导航栏上右侧的下拉菜单的层-->
					<div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
						<!--下拉菜单样式-->
						<ul class="nav navbar-nav">
							<!--右侧下拉菜单：传送门-->
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 传送门 <b class="caret"></b> </a>
								<!--下拉菜单内的内容-->
								<ul class="dropdown-menu" id="div005">
									<li>
										<a href="#">观望多元宇宙</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">主神空间</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">游戏</a>
									</li>
								</ul>
							</li>
							<!--右侧下拉菜单：关于我们-->
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown"> 关于我们 <b class="caret"></b></a>
								<!--下拉菜单内的内容-->
								<ul class="dropdown-menu" id="div005">
									<li>
										<a href="#">加入我们</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">网站声明</a>
									</li>
								</ul>
							</li>
						</ul>
						<!--下拉菜单样式（结束）-->
					</div>
					<!--包含导航栏上右侧的下拉菜单的层(结束)-->
				</div>
				<!--导航栏居中部分的层，宽度70%，据左15%（结束）-->
			</nav>
			<!--导航栏样式（结束）-->
		</div>
		<!--全局导航栏的层，永远固定在窗口最上侧（结束）-->
		<!---------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!---------------------------------------------------------------------------------------------------------->
		<!--音乐-->
		<!--<audio id="audio" controls="controls" autoplay="autoplay">
			<source src="music/新的心跳.mp3" type="audio/mp3"></source>
		</audio>-->
		<!--主神-->
		<div id="zhushen"><img id="zhushen02" src="img/001.gif" onclick="zhushen()"></div>
		<!--左边框-->
		<div id="zzz">

			<a href="#"><input id="aaa" class="btn" type="button" value="科技类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="bbb" class="btn" type="button" value="辅助类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="ccc" class="btn" type="button" value="魔法修真类" onmouseover="over(this)" onmouseout="out(this)" /></a>
			<a href="#"><input id="ddd" class="btn" type="button" value="娱乐类" onmouseover="over(this)" onmouseout="out(this)" /></a>
		</div>
		<!--右边框-->
		<div id="yyy001"></div>
		<div id="yyy002"></div>
		<div id="yyy003"></div>
		<!--遮罩层-->
		<div id="www" onclick="zhezhaoceng()"></div>
	</body>

</html>
<script>
	var left, center, right;
	var zzz = document.getElementById("zzz");
	var left = document.getElementById("yyy001");
	var center = document.getElementById("yyy002"); //中间的主要窗口
	var right = document.getElementById("yyy003");
	var www = document.getElementById("www");
	var zhushen01 = document.getElementById("zhushen");
	var div001 = document.getElementById("div001");
	//-------------------------------------------------------------------------------------------------------------------------------
	//自适应高度设置
	left.style.height = window.innerHeight - 500 + "px"; //左侧卡片
	center.style.height = window.innerHeight - 200 + "px"; //中间卡片
	right.style.height = window.innerHeight - 500 + "px"; //右侧卡片
	www.style.height = window.innerHeight + "px"; //遮罩层

	//浏览器窗口变化时，相关元素的高度跟随变化
	window.onresize = function() {
			left.style.height = window.innerHeight - 500 + "px";
			center.style.height = window.innerHeight - 200 + "px";
			right.style.height = window.innerHeight - 500 + "px";
			www.style.height = window.innerHeight + "px";
		}
		//-------------------------------------------------------------------------------------------------------------------------------
		//主神居中事件
	$(window).resize(function() {
		$("#zhushen").css({
			position: "fixed",
			left: ($(window).width() - $("#zhushen").outerWidth()) / 2,
			top: ($(window).height() - $("#zhushen").outerHeight()) / 2 + $(document).scrollTop()
		});
	});
	$(window).resize();
	//-------------------------------------------------------------------------------------------------------------------------------
	//左侧按钮，鼠标移入事件：按钮变大
	function over(e) {
		e.style.width = "80%";
		e.style.height = "80px";
		e.style.marginLeft = "10%";
		e.style.marginTop = "30px";
		e.style.color = "aqua";
	}
	//左侧按钮，鼠标移出事件：按钮变小
	function out(e) {
		e.style.width = "60%";
		e.style.height = "40px";
		e.style.marginLeft = "22%";
		e.style.marginTop = "50px";
	}
	//-------------------------------------------------------------------------------------------------------------------------------
	//导航栏自动向上隐藏
	function dh_YinCang() {
		div001.style.top = "-100px";
	}
	//导航栏自动向下出现
	function dh_XianShi() {
		div001.style.top = "0px";
	}
	//-------------------------------------------------------------------------------------------------------------------------------
	//主神出现
	function zs_show() {
		zhushen01.style.display = "inline";
	}

	//主神隐藏
	function zs_yincang() {
		zhushen01.style.display = "none";
	}
	//-------------------------------------------------------------------------------------------------------------------------------
	//点击主神，主神消失
	function zhushen() {
		zzz.style.left = "0px"; //左侧按钮出现
		left.style.right = "10%";
		center.style.right = "10%";
		right.style.right = "10%";
		setTimeout("zs_yincang()", "800");
		www.style.display = "inline";
		dh_YinCang();
		//点击主神，添加中间卡片的鼠标滑动事件
		center.addEventListener("mouseout", kp_chuxian);
		center.addEventListener("mouseover", kp_xiaoshi);
		//点击主神后，添加右侧卡片的点击事件
		right.addEventListener("click", rightaa);
	}
	//点击遮罩层，主神出现
	function zhezhaoceng() {
		www.style.display = "none";
		zzz.style.left = "-25%";
		left.style.right = "-65%";
		center.style.right = "-65%";
		right.style.right = "-65%";
		//延迟0.6秒调用显示主神
		setTimeout("zs_show()", "400");
		dh_XianShi();
		//点击遮罩层后，取消中间卡片的鼠标滑动事件
		center.removeEventListener("mouseout", kp_chuxian);
		center.removeEventListener("mouseover", kp_xiaoshi);
	}
	//--------------------------------------------------------------------------------------------------------------------------------------
	//下面是：卡片轮换效果
	//下面是：卡片轮换效果
	//下面是：卡片轮换效果
	//下面是：卡片轮换效果
	//下面是：卡片轮换效果
	//--------------------------------------------------------------------------------------------------------------------------------------
	//点击右侧卡片，调用卡片轮换效果
	function rightaa() {
		//删除旧的事件绑定
		center.removeEventListener("mouseout", kp_chuxian); //鼠标滑出
		center.removeEventListener("mouseover", kp_xiaoshi); //鼠标滑入
		right.removeEventListener("click", rightaa); //右侧卡片点击
		//-------------------------------------------------------------------------------------------------------------------------------
		// 设置一下高度
		var da = window.innerHeight - 200 + "px";
		var xiao = window.innerHeight - 500 + "px";
		//-------------------------------------------------------------------------------------------------------------------------------
		//轮换效果：右到中
		$(right).animate({
			top: '100px',
			zIndex: '20',
			height: da,
			right: '10%',
		});
		//轮换效果：中到左
		$(center).animate({
			zIndex: '10',
			height: xiao,
			top: '250px',
			//right: '16%',//这个属性添加上之后，效果变成：先左移再变小
		});
		//轮换效果：左到右
		$(left).animate({
			zIndex: '15'
		});
		//-------------------------------------------------------------------------------------------------------------------------------
		var arr = [left, center, right];
		arr.push(arr[0]); //在arr数组最后添加一个新的元素
		arr.shift(); //删除arr数组的第一个元素
		left = arr[0]; //left重新等于新数组的第一个元素
		center = arr[1]; //center重新等于新数组的第二个元素
		right = arr[2]; //right重新等于新数组的第三个元素
		//-------------------------------------------------------------------------------------------------------------------------------
		right.addEventListener("click", rightaa); //重新为右侧卡片添加点击事件
		center.addEventListener("mouseout", kp_chuxian); //重新为中间卡片添加鼠标滑动事件
		center.addEventListener("mouseover", kp_xiaoshi); //重新为中间卡片添加鼠标滑动事件
	}
	//-------------------------------------------------------------------------------------------------------------------------------
	//鼠标移出，卡片出现
	function kp_chuxian() {
		left.style.right = "16%";
		right.style.right = "4%";
	}
	//鼠标移入，卡片消失
	function kp_xiaoshi() {
		left.style.right = "10%";
		right.style.right = "10%";
	}
	//-------------------------------------------------------------------------------------------------------------------------------
</script>